<template>
  <div class="claim_div">
    <header class="head_top">
      <h3 class="h3">信息中心</h3>
      <h3 v-if="!isTitle" class="h3 main_left">> {{titleName}} </h3>
    </header>
    <div class="btn-class">
      <a-button v-if="isListBtn" type="primary" @click="addApply">新建申领</a-button>
      <a-button v-else type="reset" @click="backFn">返回列表</a-button>
    </div>
    <article class="article-box" v-if="isListBtn">
      <nav class="nav-top">
        <ul class="nav-left">
          <li @click="tagChange(v,i)" class="nav-left-item" :class="{'selectClass':selectTag==i}" v-for="(v,i) in navData" :key="i">{{v.title}}</li>
        </ul>
        <div class="nav-right">
          <a-button class="export-btn" v-if="selectTag==3" @click="exportExcel"><a-icon type="cloud-download" style="color: #fff"/> 导出数据</a-button>
          <a-form-model :model="pages" :colon="false" layout="inline" v-else>
            <a-form-model-item label="是否紧急" >
              <a-checkbox v-model="pages.isUrgent" />
            </a-form-model-item>
            <a-form-model-item label="关键字" style="margin-right: 0">
              <a-input-search allowClear v-model="pages.searchKey" placeholder="请输入关键字搜索" @search="onSearch" />
            </a-form-model-item>

          </a-form-model>
        </div>
      </nav>
      <div class="tableclass">
        <my-table :data-source="allTableData" bordered :pagination="false" :columns="allColumns" :rowKey="(record) => record.id">
          <template slot="action" slot-scope="text, record">
            <a class="solvebtn" @click="getDetail(record)">详细信息</a>
            <a v-if="record.isAudit == 1 &&(record.status == 0 || record.status == 1)" class="solvebtn" @click="editApply(record)">修改</a>
            <a v-if="record.status == 6" class="solvebtn" @click="warehousing(record)">采购入库</a>
            <!--  && record.isAudit == 4 -->
            <a v-if="(record.status == 0 && record.isAudit == 2) ||(record.status == 2 && record.isAudit == 3)" class="solvebtn" @click="examineBtn(record)">审核</a>
            <a-popconfirm title="确定删除?" ok-text="确认" cancel-text="取消" @confirm="deleteItem(record)">
              <a v-if="record.isAudit == 1 && selectTag==0" class="solvebtn">删除</a>
            </a-popconfirm>
          </template>
        </my-table>
      </div>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination :show-total="(total) => `共 ${allTotal} 条记录`" v-model="pages.currentPage" :total="allTotal" :defaultPageSize="pages.pageSize" :item-render="itemRender" @change="pagechangeFn"/>
        </div>
      </div>
    </article>

    <div v-else class="detailed-box">
        <!--详细信息表格-->
        <div class="table-box">
          <h3 class="h3 cent-title">申请物资采购清单</h3>
          <div class="table-form">
            <a-table :[isSelectChack]="rowSelection" :data-source="detailedTableData" :columns="colum" :pagination="false" bordered :rowKey="(record) => { record.id}" :scroll="{x:1300 ,y: '40vh' }">
              <template slot-scope="text, record,index" slot="name">
                <a-auto-complete v-model="record.name" :disabled="isTitle" class="input_style" @search="filterOption" @select="(value)=>autoSelectFn(value,index)" @focus="()=>autoSelestData = copyAutoSelestData">
                  <template slot="dataSource">
                    <a-select-option v-for="(v,i) in autoSelestData" :key="v.id" :title="v.name+'('+v.version+')'">
                      {{ v.name }}({{v.version}})
                    </a-select-option>
                  </template>
                </a-auto-complete>
              </template>
              <template slot-scope="text,record" slot="version">
                <a-input v-model="record.version" :disabled="isTitle" class="input_style"/>
              </template>
              <template slot-scope="text,record" slot="code">
                <a-input v-model="record.code" :disabled="isTitle" class="input_style"/>
              </template>
              <template slot-scope="text,record" slot="brand">
                <a-input v-model="record.brand" :disabled="isTitle" class="input_style"/>
              </template>
              <template slot-scope="text,record" slot="number">
                <a-input v-model="record.number" :disabled="isTitle" class="input_style"/>
              </template>
              <template slot-scope="text,record" slot="unit">
                <a-input v-model="record.unit" :disabled="isTitle" class="input_style"/>
              </template>
              <template slot-scope="text,record" slot="typeId">
                <a-select :disabled="isTitle" v-model="record.typeId" style="width: 100%">
                  <a-select-option v-for="(item, index) in typeList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </template>
              <template slot-scope="text, record" slot="useTime">
                <a-date-picker :disabled="isTitle" v-model="record.useTime"/>
              </template>
              <template slot-scope="text,record" slot="useDept">
                <a-input v-model="record.useDept" :disabled="isTitle" class="input_style"/>
              </template>
              <template slot-scope="text,record" slot="isUrgent">
                <a-checkbox v-model="record.isUrgent" :disabled="isTitle" />
                <!--              <a-input v-model="record.useDept" :disabled="isTitle" class="input_style"/>-->
              </template>
              <template slot-scope="text,record,index" slot="notes">
                <a-input v-model="record.notes" :disabled="isTitle" class="input_style"/>
                <a-popconfirm title="确认删除?" @confirm="() => onDelete(index)">
                  <a href="javascript:;" class="deleteBtn" v-if="!isTitle&&titleName=='新建申领'">x</a>
                </a-popconfirm>
              </template>
            </a-table>
            <div style="text-align: center" v-if="!isTitle&&titleName=='新建申领'">
              <a-button type="primary" class="add-btn" @click="addNew">+</a-button>
            </div>
          </div>
          <div class="submit-box" v-if="!isTitle||isWarehousing">
            <a-button type="primary" @click="submitFrom" v-if="!isWarehousing">确认上报</a-button>
            <a-button type="reset" v-if="titleName=='新建申领'" @click="rewriteFrom" class="bottom-btn">重新填写</a-button>
            <a-button type="primary" @click="addWarehousing" v-if="isWarehousing">确认入库</a-button>
          </div>
          <div v-if="isTitle&&!isWarehousing" style="width: 100%;height: 30%">
            <ul class="ul-class">
              <li class="li-class" v-for="v in carListData" :key="v.id">
                <div>
                  <p>审核人：{{v.nickname}}</p>
                  <p>审核时间：{{v.time}}</p>
                  <p>审核信息：{{v.remark}}</p>
                </div>

              </li>
            </ul>
          </div>
        </div>
    </div>

<!--审核-->
    <a-modal v-model="examineModel" title="申领审核" centered width="45%"  @ok="examineSave" @cancel="examineCancel">
      <a-form-model class="pollutionForm" :model="examineFrom" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" ref="ruleForm" :rules="examineFromRules">
        <a-form-model-item label="审核状态">
          <a-radio-group name="radioGroup" v-model="examineFrom.isAgree" style="margin-left: 30px">
            <a-radio :value="true" style="color: #fff"> 通过</a-radio>
            <a-radio :value="false" style="margin-left: 50px; color: #fff">驳回</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="审核意见" prop="opinion">
          <a-textarea placeholder="请输入审核意见" :rows="6" v-model="examineFrom.opinion" style="margin-left: 30px; color: #fff"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
const colum = [
  {
    title: "序号",
    dataIndex: "id",
    width: 80,
    align: "center",
    customRender: (text, record, index) =>
        `${(1 - 1) * 10 + index + 1}`,
  },
  {
    title: "物资名称",
    dataIndex: "name",
    ellipsis: "true",
    align: "center",
    width: "8%",
    scopedSlots: {
      customRender: "name",
    },
  },
  {
    title: "规格型号",
    dataIndex: "version",
    ellipsis: "true",
    align: "center",
    width: "8%",
    scopedSlots: {
      customRender: "version",
    },
  },
  {
    title: "存货编码",
    dataIndex: "code",
    ellipsis: "true",
    align: "center",
    width: "8%",
    scopedSlots: {
      customRender: "code",
    },
  },
  {
    title: "品牌",
    dataIndex: "brand",
    ellipsis: "true",
    align: "center",
    width: "8%",
    scopedSlots: {
      customRender: "brand",
    },
  },
  {
    title: "数量",
    dataIndex: "number",
    align: "center",
    width:80,
    scopedSlots: {
      customRender: "number",
    },
  },
  {
    title: "单位",
    dataIndex: "unit",
    align: "center",
    scopedSlots: {
      customRender: "unit",
    },
    width:100,
  },
  {
    title: "采购类别",
    dataIndex: "typeId",
    ellipsis: "true",
    align: "center",
    width: "10%",
    scopedSlots: {
      customRender: "typeId",
    },
  },
  {
    title: "使用时间",
    dataIndex: "useTime",
    ellipsis: "true",
    align: "center",
    width: "12%",
    scopedSlots: {
      customRender: "useTime",
    },
  },
  {
    title: "使用单位",
    dataIndex: "useDept",
    ellipsis: "true",
    align: "center",
    width: "8%",
    scopedSlots: {
      customRender: "useDept",
    },
  },
  {
    title: "是否紧急",
    dataIndex: "isUrgent",
    align: "center",
    width: 100,
    scopedSlots: {
      customRender: "isUrgent",
    },
  },

  {
    title: "备注",
    dataIndex: "notes",
    ellipsis: "true",
    align: "center",
    scopedSlots: {
      customRender: "notes",
    },
  },
]
export default {
name: "newClaim",
  data(){
   const column = [
      {
        title: "序号",
        width: "100px",
        dataIndex: "id",
        align: "center",
        ellipsis: true,
        customRender: (text, record, index) => `${(this.$data.pages.currentPage - 1) * this.$data.pages.pageSize + index + 1}`
      },
      {title: "批次号", width: "16%", ellipsis: true, dataIndex: "serialNumber", align: "center"},
      {title: "申请信息", ellipsis: true, dataIndex: "name", align: "center"},
      {title: "申请地区", width: "18%", ellipsis: true, dataIndex: "areaName", align: "center"},
      {title: "采购数量", width: "10%", ellipsis: true, dataIndex: "number", align: "center"},
      {title: "操作", width: "240px", scopedSlots: {customRender: "action"}, align: "center"}
    ];
   const navData = [
      {title: "待审核",statusList:[0],columns:column},
      {title: "审核中",statusList:[2,3,4,5],columns:column},
      {title: "驳回",statusList:[1],columns:column},
      {title: "待采购",statusList:[6],columns:column},
      {title: "已采购",statusList:[7],
        columns: [
          {
            title: "序号",
            width: "100px",
            dataIndex: "id",
            align: "center",
            ellipsis: true,
            customRender: (text, record, index) => `${(this.$data.pages.currentPage - 1) * this.$data.pages.pageSize + index + 1}`
          },
          {title: "批次号", width: "16%", ellipsis: true, dataIndex: "serialNumber", align: "center"},
          {title: "申请信息", ellipsis: true, dataIndex: "name", align: "center"},
          {title: "申请地区", width: "18%", ellipsis: true, dataIndex: "areaName", align: "center"},
          {title: "采购数量", width: "10%", ellipsis: true, dataIndex: "number", align: "center"},
          {title: "入库时间", width: "10%", ellipsis: true, dataIndex: "endTime", align: "center"},
          {title: "操作", width: "240px", scopedSlots: {customRender: "action"}, align: "center"}
        ]
      }
    ];
    return{
      moment,
      titleName:"",
      isTitle:true,
      isListBtn:true,  // 切换详细页面
      navData,
      colum, // 详细信息表头
      selectTag:0,  // 待审核等标签选中
      pages:{  // 分页
        currentPage:1,
        pageSize:10,
        statusList:[0],
        searchKey:undefined,
        userId:this.$user.id,
        isUrgent:false
      },
      allTotal:0, // 总条数
      allTableData:[],  // 外层的表数据
      allColumns:[], // 外层的表头
      detailedTableData:[], // 详细信息表格数据
      typeList:[],  // 采购类别
      autoSelestData:[],  // 物资名称
      copyAutoSelestData:[], // 物资名称copy
      carListData:[],  // 详细卡片数据
      editFrom:{},   // 存储修改的数据
      examineModel:false,  // 审核弹窗
      examineFrom:{
        id: "",
        userId: this.$user.id,
        isAgree: true,
        opinion: "",
        status: "",
      },
      examineFromRules:{
        opinion:[{ required: true, message: '审核意见必填', trigger: 'blur' },]
      },
      isSelectChack:"",
      isWarehousing:false,
      warehousingListId:[],  // 确认采购列表
    }
  },
  computed:{

    rowSelection() {
      const then = this;
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          let list = [];
          selectedRows.forEach(v=>{
            list.push(v.id)
          })
          then.warehousingListId = list;
        }
      };
    },
  },
  methods:{
  // 导出数据
    exportExcel(){
        this.$api.exportApply().then(res=>{
          if(res.data.code === 0){
            window.open(res.data.data);
          }
        })
    },
  // 新建申领
    addApply(){
      this.isTitle = false;
      this.isListBtn = false;
      this.titleName = "新建申领";
      this.editFrom = {};
    },
    // 修改申领
    editApply(item){
      this.titleName = "修改申领";
      this.isTitle = false;
      this.isListBtn = false;
      this.editFrom={
        id:item.id,
        status:item.status
      }
      this.$api.lookListDetail(item.id).then(res=>{
        if(res.data.code === 0){
          res.data.data.procuListInfoSearchPos.forEach(v=>{
            v.applyTime?v.applyTime = moment(v.applyTime):"";
            v.useTime?v.useTime = moment(v.useTime):"";
          })
          this.detailedTableData = res.data.data.procuListInfoSearchPos;
        }else {
          this.$message.warning(res.data.errorMessage)
        }
      });
      console.log(item)
    },
    // 返回列表
    backFn(){
      this.isTitle = true;
      this.isListBtn=true;
      this.detailedTableData = [];
      this.titleName = "";
      this.autoSelestData = this.copyAutoSelestData;
      this.isSelectChack = "";
      this.isWarehousing = false;
      this.warehousingListId = [];
    },
    // 搜索
    onSearch(){
      this.getList()
    },
    // 标签切换
    tagChange(item,index){
      console.log(...arguments)
      this.selectTag = index;
      this.pages.statusList = item.statusList;
      this.allColumns = item.columns
      this.getList();
    },
    // 获取表格数据
    getList(){
      this.$api.getApplyCenterData(this.pages).then(res=>{
        if(res.data.code == 0){
          res.data.data.records.forEach(v=>{
            v.applyTime?v.applyTime = moment(v.applyTime).format("YYYY/MM/DD"):"";
            v.endTime?v.endTime = moment(v.endTime).format("YYYY/MM/DD"):"";
          })
          this.allTableData = res.data.data.records;
          this.allTotal = res.data.data.total;
        }else {
          this.$message.warning(res.data.errorMessage)
        }
      })
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return<a> 上一页 < /a>;
      } else if (type === "next") {
        return<a> 下一页 < /a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.pages.currentPage = page;
      this.getList();
    },
    // 删除申请记录
    deleteItem(data){
      this.$api.deleteList(data.id).then(res=>{
        if (res.data.code === 0){
          this.$message.info("删除成功！")
          this.getList()
        }else {
          this.$message.warning(res.data.errorMessage)
        }
      })
    },
    // 获取详细信息
    getDetail(item) {
      this.isListBtn = false;
      this.isTitle = true;
      this.$api.lookListDetail(item.id).then(res=>{
        if(res.data.code === 0){
          res.data.data.procuListInfoSearchPos.forEach(v=>{
            v.applyTime?v.applyTime = moment(v.applyTime):"";
            v.useTime?v.useTime = moment(v.useTime):"";
          })
          this.detailedTableData = res.data.data.procuListInfoSearchPos;
        }else {
          this.$message.warning(res.data.errorMessage)
        }
      })
      if(this.selectTag === 0) return;
      this.$api.lcinfo(item.id).then(res => {
        if(res.data.code === 0){
          res.data.data.forEach(v=>{
            v.time = moment(v.time).format("YYYY-MM-DD");
          })
          this.carListData = res.data.data;
        }else {
          this.$message.error(res.data.errorMessage)
        }
      });
    },
    // 获取物资名称下拉列表
    getAutoList() {
      let obj={
        currentPage: 1,
        pageSize: 1000,
        searchKey: ""
      }
      this.$api.findProcurement(obj).then(res => {
        if(res.data.code === 0){
          let records = res.data.data.records
          if (records) {
            records.forEach(item => {
              item.name = item.name.trim();
            })
          }
          this.autoSelestData = JSON.parse(JSON.stringify(records));
          this.copyAutoSelestData = records;
        }else {
          this.$message.warning(res.data.errorMessage)
        }
      })
      this.$api.lookLeixing().then((res) => {
        if(res.data.code===0){
          this.typeList = res.data.data;
        }else {
          this.$message.warning("获取采购类别失败")
        }
      });
    },
    // 物资名称select
    autoSelectFn(value,index){
      this.autoSelestData.forEach((v)=>{
        if(v.id === value){
          // this.detailedTableData[index].name = v.name+"("+v.version+")";
          this.detailedTableData[index].code = v.code;
          this.detailedTableData[index].version = v.version;
          this.detailedTableData[index].unit = v.unit;
        }
      })
    },
    // 物资名称检索
    filterOption(value){
      this.autoSelestData = this.copyAutoSelestData.filter(v=>v.name.toUpperCase().indexOf(value.toUpperCase())>=0);
    },
    // 新增行
    addNew(){
        let newData = {
          name: "",
          version: "",
          code:"",
          brand: "",
          number: "",
          unit: "",
          typeId: "1344454595944804353",
          deptName: "",
          useTime: moment().add(7,"d"),
          useDept: "",
          isUrgent:false,
          notes: "",
        };
        this.detailedTableData.push(newData);
    },
    // 删除行
    onDelete(index) {
      this.detailedTableData.splice(index,1);
    },
    // 确认上报
    submitFrom(){
      if(this.detailedTableData.length === 0){
        return this.$message.info("请填写采购物资名称、规格型号、数量、采购类别");
      }
      let istrue = this.detailedTableData.some(item=> {if (!item.name || !item.number || !item.unit || !item.typeId) return true})
      if(istrue)return this.$message.info("请填写采购物资名称、规格型号、数量及采购类别");
      let detailedTableData = JSON.parse(JSON.stringify(this.detailedTableData));
      let form = {
        name: "",
        areaId: this.$user.deptId,
        userId: this.$user.id,
        typeId: "",
        userTime: moment(),
        applyTime: new Date().getTime(),
        notes: "",
        saleAgreement: "",
        procuListSaveDtoList: [],
        procuListEditDtoList: [],
        procuAuditInfoPos: [],
      }
      if (this.titleName === "新建申领"){
        detailedTableData.forEach(v=>{
          if(v.name){
            v.useTime = new Date(v.useTime).getTime();
            v.name = this.copyAutoSelestData.filter(item=>item.id==v.name)[0].name;
          }
        })
        form.procuListSaveDtoList = detailedTableData;
        this.$api.saveProcurement(form).then(res=>{
          if(res.data.code === 0){
            this.detailedTableData=[];
            this.backFn()
            this.getList();
          }else {
            this.$message.error(res.data.errorMessage)
          }
        })
      }else {
        form.id = this.editFrom.id;
        form.status = this.editFrom.status;
        detailedTableData.forEach(v=>{
          if(Number(v.name)){
            v.name = this.copyAutoSelestData.filter(item=>item.id==v.name)[0].name;
          }
          v.useTime = new Date(v.useTime).getTime();
        })
        form.procuListEditDtoList = detailedTableData;
        this.$api.modifyList(form).then(res =>{
            if(res.data.code === 0){
              this.backFn();
              this.getList();
              this.$message.info("修改成功")
            }else {
              this.$message.error(res.data.errorMessage)
            }
        });
      }
      console.log(detailedTableData,form);
    },
    // 重新填写
    rewriteFrom(){
      this.detailedTableData = [];
    },
    // 审核
    examineBtn(data){
      this.examineModel = true;
      this.examineFrom.id = data.id;
      this.examineFrom.status = data.status;
    },
    // 审核弹窗确认
    examineSave(){
      this.$api.onReport_z(this.examineFrom).then(res=>{
        if(res.data.data){
          this.examineModel = false;
          this.examineFrom = {
            id: "",
            userId: this.$user.id,
            isAgree: true,  // 审核
            opinion: "",  // 审核意见
            status: "",
          };
          this.getList()
        }else {
          this.$message.error(res.data.errorMessage)
        }
      })
    },
    // 审核弹窗取消
    examineCancel(){
      this.examineFrom = {
        id: "",
        userId: this.$user.id,
        isAgree: true,  // 审核
        opinion: "",  // 审核意见
        status: "",
      };
      this.examineModel = false;
    },
    // 采购入库
    warehousing(data){
      this.isSelectChack = "row-selection";
      this.isWarehousing = true;
      this.getDetail(data);
    },
    // 确认入库
    addWarehousing(){
      console.log(this.warehousingListId)

      if(this.warehousingListId.length === 0)return this.$message.info("请勾选要入库的物资");
      return
      this.$api.procurementSaveGoods().then(res=>{
        if (res.data.code === 0){
          this.backFn();
          this.getList();
          this.$message.info("入库成功！")
        }else {
          this.$message.error(res.data.errorMessage)
        }
      })
    },
  },
  created() {
    this.getAutoList()
    this.tagChange(this.navData[0],0);
  },
  mounted() {

  }
}
</script>

<style scoped lang="scss">
.solvebtn {
  display: inline-block;
  margin: 0 10px;
  color: #9fb043;
}
.claim_div{
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  .head_top{
    display: flex;
    .main_left{
      margin-left: 6px;
    }
  }
  .btn-class{
    display: flex;
    justify-content: flex-end;
  }
  .article-box{
    width: 100%;
    height: calc(100% - 60px);
    //background: rgba(0,0,0,0.3);
    .nav-top{
      margin: 10px 0 10px 0;
      display: flex;
      justify-content: space-between;
      .nav-left{
        display: flex;
        //align-items: center;
        line-height: 40px;
        .nav-left-item{
          color: #6f8a86;
          margin-right: 16px;
          cursor: pointer;
        }
        .selectClass{
          color: #37ddc0;
          border-bottom: 1px solid #37ddc0;
        }
      }
      .nav-right{
        display: flex;
        align-items: center;
        ::v-deep .ant-table-wrapper .ant-checkbox-checked .ant-checkbox-inner{
          background: transparent;
        }
        ::v-deep .ant-checkbox-inner{
          background: transparent;
        }
        ::v-deep .ant-checkbox-checked::after{
          border: 1px solid #37ddc0!important;
        }
        .export-btn{
          font-size: 16px;
          background: none;
          border: 0;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  .tableclass{
    width: 100%;
    height: calc(100% - 100px);
  }
  .content-bottom{
    .page-box{
      float: right;
    }
  }

  }
  .detailed-box{
    width: 100%;
    height: calc(100% - 60px);
    .table-box{
      width: 100%;
      height: 100%;
      position: relative;
      .cent-title{
        text-align: center;
        line-height: 50px;
        font-weight: normal;
      }
      .table-form{
        height: 62%;
        width: 100%;
      }
      .submit-box{
        position: absolute;
        right: 0;
        bottom: 4%;
        .bottom-btn{
          margin-left: 30px;
        }
      }
      .ul-class{
        width: 100%;
        overflow-x: auto;
        display: flex;
        box-sizing: border-box;
        &::-webkit-scrollbar {
          height: 12px;
          width: 12px;
          border: 1px solid #207064;
        }

        &::-webkit-scrollbar-thumb {
          //border-radius: 10px;
          background-color: #207064;
        }

        &::-webkit-scrollbar-track {
          border-radius: 0;
          background: transparent;
        }

        &::-webkit-scrollbar-corner {
          width: 0;
          height: 0;
          background: transparent;
        }
        .li-class{
          width: 250px;
          height: 180px;
          margin-right: 20px;
          background: #206056;
          border-radius: 10px;
          display: inline-block;
          font-size: 15px;
          color: #9fb043;
          padding: 10px;
          flex-shrink: 0;
        }
      }
      ::v-deep .input_style.ant-input{
        background-color: transparent !important;
        outline: none !important;
        border: none !important;
      }
      ::v-deep .ant-input[disabled]{
        color: #37ddc0 !important;
        background-color: #2c4945;
        cursor: text
      }
      ::v-deep .ant-table-wrapper .ant-checkbox-checked .ant-checkbox-inner{
        background: transparent;
      }
      ::v-deep .ant-checkbox-inner{
        background: transparent;
      }
      .deleteBtn {
        position: absolute;
        color: #37ddc0;
        right: 5px;
        font-size: 20px;
      }
    }
  }
}
/* 表格样式 */
::v-deep .ant-table-wrapper .ant-table-fixed-header .ant-table-scroll .ant-table-header{
  overflow: hidden!important;
}

::v-deep .ant-table table {
  border-radius: 0;
  border: 1px solid #207064;
}

::v-deep .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
  border: none;
}

::v-deep .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid #2c6a60;
  padding: 0px;
  height: 35px;
}

::v-deep .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}

::v-deep .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}

::v-deep .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}

::v-deep .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}

::v-deep .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}

::v-deep .ant-table-tbody > tr > td {
  border-bottom: 1px solid #207064;
}

::v-deep .ant-table-thead > tr > th {
  border-bottom: 1px solid #207064;
}

::v-deep .ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .ant-table-bordered.ant-table-empty .ant-table-placeholder{
  border-left: 0;
  border-right: 0;
}
</style>

<style>
.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{
  border: 1px solid #37ddc0!important;
}
.ant-popover-message-title {
  color: white;
}
</style>